<div class="header">
  <div class="left flex" (click)="detailsClose()">
    <div class="left-icon" style="padding-top: 5px;">
      <i class="fa fa-times" aria-hidden="true" style="font-size: 1.5em;"></i>
    </div>
    <div class="left-name">
      <span class="back-name">关闭</span>
    </div>
  </div>
  <div class="center">订单记录详情页</div>
</div>
<div class="main">
  <div class="record-box" style="width: 100%;margin-top: 57px;">
    <div class="title-text">基本信息</div>

    <div class="record-list" style="margin-bottom: 0">
      <div class="record-item flex">
        <div class="record-item-name">订单编号</div>
        <div class="record-item-text">{{details['order_id']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">餐桌名称</div>
        <div class="record-item-text">{{details['tname']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">开台时间</div>
        <div class="record-item-text">{{details['order_time']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">开台人姓名</div>
        <div class="record-item-text">{{details['create_user_name']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">订单总价</div>
        <div class="record-item-text">￥{{details['total']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">结单单号</div>
        <div class="record-item-text">{{details['settlement_id']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">结单时间</div>
        <div class="record-item-text">{{details['settlement_time']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">结单人</div>
        <div class="record-item-text">{{details['settlement_user_name']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">结单价</div>
        <div class="record-item-text">￥{{details['settlement_money']}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">折扣</div>
        <div class="record-item-text">{{(details['settlement_money']/details['total']).toFixed(2)}}</div>
      </div>
      <div class="record-item flex" *ngIf="details['settlement_remark']">
        <div class="record-item-name">结单备注</div>
        <div class="record-item-text">{{details['settlement_remark']}}</div>
      </div>
      <div class="record-item flex" *ngIf="details['is_revoke'] == '1'">
        <div class="record-item-name">撤单时间</div>
        <div class="record-item-text">{{details['revoke_time']}}</div>
      </div>
      <div class="record-item flex" *ngIf="details['is_free'] == '1' && details['free_remark']">
        <div class="record-item-name">免单备注</div>
        <div class="record-item-text">{{details['free_remark']}}</div>
      </div>
      <div class="record-item flex" *ngIf="details['is_credit'] == '1' && details['credit_people']">
        <div class="record-item-name">挂账人姓名</div>
        <div class="record-item-text">{{details['credit_people']}}</div>
      </div>
      <div class="record-item flex" *ngIf="details['is_entertain'] == '1' && details['entertain_remark']">
        <div class="record-item-name">招待单备注</div>
        <div class="record-item-text">{{details['entertain_remark']}}</div>
      </div>
      <div class="record-item flex"
           *ngIf="details['is_credit']=='1' || details['is_entertain'] == '1' || details['is_free'] == '1' || details['is_revoke'] == '1' && details['is_card_pay']=='1'">
        <div class="record-item-ext" *ngIf="details['is_credit']=='1'"><span
          style="background: #ff3860;color: #fff">挂帐</span></div> <!-- 是否为挂帐单 -->
        <div class="record-item-ext" *ngIf="details['is_entertain'] == '1'"><span style="background: #23d160;color: #fff">招待单</span>
        </div> <!-- 是否为招待单 -->
        <div class="record-item-ext" *ngIf="details['is_free'] == '1'"><span
          style="background: #3273dc;color: #fff">免单</span></div> <!-- 是否免单 -->
        <div class="record-item-ext" *ngIf="details['is_revoke'] == '1'"><span
          style="background: #ffdd57;color: rgba(0, 0, 0, 0.7)">撤单</span></div> <!-- 是否撤单 -->
        <div class="record-item-ext" *ngIf="details['is_card_pay']"><span style="background: #ff0000;color: #fff"
                                                                       *ngIf="details['is_input_card_code'] == '1'">未验证</span>
        </div> <!-- 是否使用会员支付 (是否使用短信验证码进行验证) -->
      </div>
    </div>
    <div class="title-text" *ngIf="optList.length" style="margin-top: 1em;border-bottom: 1px solid #eee;">支付方式</div>
    <div>
      <div class="record-list flex" style="flex-wrap: wrap;padding: 0 0 0 1em;">
        <div *ngFor="let v of optList;let i = index;" class="item"
             style="border-bottom:1px solid #f4f4f4;line-height: 2.5em;height: 2.5em;width: 50%;padding: .5em 0">
          <span style="color: #fff; padding: .5em;border-radius: 2px;"
                [ngClass]="{'h':i==0,'l':i==1,'o':i==2,'z':i==3,'m':i==4,'lan':i==5,'zl':i==6,'ll':i==7,'lan':i==8}"
          >{{v.payName}} ￥{{v.money}}</span>
        </div>
      </div>
    </div>
    <div *ngIf="odList.length" class="title-text">菜品列表</div>
    <div class="record-list list" *ngFor="let v1 of odList">
      <div class="record-item flex">
        <div class="record-item-name">食物名称</div>
        <div class="record-item-text">{{v1.food_name}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">点单人</div>
        <div class="record-item-text">{{v1.create_user_name}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-item-name">点单时间</div>
        <div class="record-item-text">{{v1.create_time}}</div>
      </div>
      <div class="record-item flex" *ngIf="v1.practice">
        <div class="record-item-name">做法</div>
        <div class="record-item-text">{{v1.practice}}</div>
      </div>
      <div class="record-item flex">
        <div class="record-f">数量：{{v1.num}}</div>
        <div class="record-f">单价：￥{{v1.price}}</div>
        <div class="record-f">总价：￥{{v1.total_price}}</div>
      </div>
    </div>

    <div class="title-text" *ngIf="logList.length">操作记录</div>
    <div style="padding: 1em 1em 2em 2em" *ngIf="logList.length">
      <div *ngFor="let v of logList">
        <div class="log-box" *ngIf="v.stateStr == '开台'">
          <span class="log-kt-box"><i class="fa fa-play-circle"></i></span>
          <div class="log-kt-content">
            <div>{{v.content}}</div>
            <div style="text-align: right;padding-right: .5em;color: #eee"><i class="fa fa-clock"></i> {{v.create_time}}</div>
          </div>
        </div>
        <div class="log-box" *ngIf="v.stateStr == '加菜'">
          <span class="log-jia-box"><i class="fa fa-plus-circle"></i></span>
          <div class="log-jia-content">
            <div>{{v.content}}</div>
            <div style="text-align: right;padding-right: .5em;color: #eee"><i class="fa fa-clock"></i> {{v.create_time}}</div>
          </div>
        </div>
        <div class="log-box" *ngIf="v.stateStr == '退菜'">
          <span class="log-jc-box"><i class="fa fa-times-circle"></i></span>
          <div class="log-jc-content">
            <div>{{v.content}}</div>
            <div style="text-align: right;padding-right: .5em;color: #eee"><i class="fa fa-clock"></i> {{v.create_time}}</div>
          </div>
        </div>
        <div class="log-box" *ngIf="v.stateStr == '转台'">
          <span class="log-hz-box"><i class="fa fa-retweet" style="font-size: 1.6em;"></i></span>
          <div class="log-hz-content">
            <div>{{v.content}}</div>
            <div style="text-align: right;padding-right: .5em;color: #eee"><i class="fa fa-clock"></i> {{v.create_time}}</div>
          </div>
        </div>
        <div class="log-box" *ngIf="v.stateStr == '并台'">
          <span class="log-bz-box"><i class="fa fa-compress"></i></span>
          <div class="log-bz-content">
            <div>{{v.content}}</div>
            <div style="text-align: right;padding-right: .5em;color: #eee"><i class="fa fa-clock"></i> {{v.create_time}}</div>
          </div>
        </div>
      </div>
      <div class=" log-box">
        <span class="log-end-box"><i class="fa fa-clock" style="font-size: 1.6em;"></i></span>
      </div>

    </div>
  </div>
</div>
